<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">客户</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入名称/昵称/ID"
                        [(ngModel)]="queryForm.userInfo"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">用户优惠券ID</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入用户优惠券ID"
                        [(ngModel)]="queryForm.id"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">优惠券ID</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入优惠券ID"
                        [(ngModel)]="queryForm.couponNo"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">关联单号</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入关联单号"
                        [(ngModel)]="queryForm.orderNum"
                    />
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">领取时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [(ngModel)]="queryForm.getTimeForm"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">过期时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [(ngModel)]="endTimeArrs" (ngModelChange)="onTimeChange($event, 0)"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">使用时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [(ngModel)]="useTimeArrs" (ngModelChange)="onTimeChange($event, 1)"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">状态</label>
                <div class="common-search-conrol">
                    <nz-select nzShowSearch nzAllowClear nzPlaceHolder="全部" [(ngModel)]="queryForm.status">
                        <nz-option nzLabel="待使用" nzValue="1"></nz-option>
                        <nz-option nzLabel="售后中" nzValue="2"></nz-option>
                        <nz-option nzLabel="已过期" nzValue="3"></nz-option>
                        <nz-option nzLabel="已使用" nzValue="4"></nz-option>
                        <nz-option nzLabel="强制停止" nzValue="5"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="query()">查询</button>
                    <button nz-button nzType="default" (click)="backList()">重置</button>
                    <a nz-button nzType="link" (click)="isCollapse = !isCollapse">
                        {{ isCollapse ? '收起' : '展开' }}
                        <i nz-icon [nzType]="isCollapse ? 'up' : 'down'"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="pagination-wrap-position m-t-2">
    <div class="operation-wrap p-b-10">
        <button nz-button nzType="primary" (click)="showModel()" *ngIf="permission.userPermission.has('marketing:userCoupon:revocation')">批量撤回用户用券</button>
    </div>
    <!-- Table -->
    <div class="table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzScroll]="{ x: '1100px' }"
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableLoading"
            [nzData]="listOfData?.list"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="listOfData?.total"
            [nzPageIndex]="queryForm.pageNum"
            [nzPageSize]="queryForm.pageSize"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)">
            <thead>
                <tr>
                    <th
                        nzAlign="center"
                        nzWidth="80px"
                        [(nzChecked)]="checked"
                        (nzCheckedChange)="onAllChecked($event)"
                        nzLeft>
                    </th>
                    <th nzAlign="center" nzWidth="180px" nzLeft>优惠券ID</th>
                    <th nzAlign="center" nzWidth="180px" nzLeft>用户优惠券ID</th>
                    <th nzAlign="center" nzWidth="120px">客户ID</th>
                    <th nzAlign="center" nzWidth="180px">优惠券名称</th>
                    <th nzAlign="center" nzWidth="120px">领取面值</th>
                    <th nzAlign="center" nzWidth="120px">实际抵扣</th>
                    <th nzAlign="center" nzWidth="200px">关联订单号</th>
                    <th nzAlign="center" nzWidth="180px">领取时间</th>
                    <th nzAlign="center" nzWidth="180px">过期时间</th>
                    <th nzAlign="center" nzWidth="180px">使用时间</th>
                    <th nzAlign="center" nzWidth="120px">状态</th>
                    <th nzAlign="center" nzWidth="150px" nzRight>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr *ngFor="let data of basicTable.data">
                    <!-- 复选框 -->
                    <td
                        nzAlign="center"
                        [nzChecked]="data.checked"
                        (nzCheckedChange)="onItemChecked(data.id, $event)"
                        [nzDisabled]="data.status != '1'"
                        nzLeft>
                    </td>
                    <!-- 优惠券ID -->
                    <td nzAlign="center" nzLeft>{{ data.couponNo ? data.couponNo : '-' }}</td>
                    <!-- 用户优惠券ID -->
                    <td nzAlign="center" nzLeft>{{ data.id }}</td>
                    <!-- 客户ID -->
                    <td nzAlign="center">
                        <a
                            nz-button
                            nz-button-tdlink
                            nzType="link"
                            target="_blank"
                            [disabled]="!data.realUserId"
                            [routerLink]="['/customer/tabs', data.realUserId, 0]">
                            {{ data.realUserId || '-' }}
                        </a>
                    </td>
                    <!-- 优惠券名称 -->
                    <td nzAlign="center">
                        {{ data.couponName }}
                        <i nz-icon nz-tooltip nzType="exclamation-circle" nzTheme="outline" [nzTooltipTitle]="titleTemplate"
                            nzTooltipPlacement="bottom"></i>
                        <ng-template #titleTemplate>
                            <p>名称: {{ data.couponInfo.couponName }}</p>
                            <p>备注: {{ data.couponInfo.remark }}</p>
                            <p>类型: {{ data.couponInfo.type }}</p>
                            <p>内容: {{ data.couponInfo.useDesc }}</p>
                            <!-- <p>使用时间: {{ data.couponInfo.useTime | date: 'yyyy-MM-dd HH:mm:ss' }}</p> -->
                        </ng-template>
                    </td>
                    <!-- 领取面值 -->
                    <td nzAlign="center">
                        <div [ngSwitch]="data?.couponInfoType">
                            <!-- 满减 -->
                            <div *ngSwitchCase="1">
                                {{ data.couponLimitSmall }}
                            </div>
                            <!-- 折扣 -->
                            <div *ngSwitchCase="2">
                                {{ data.couponLimitSmall }}<span>折</span>
                            </div>
                            <!-- 随机 -->
                            <div *ngSwitchCase="3">
                                {{ data.discountsAmount }}
                            </div>
                            <div *ngSwitchDefault>-</div>
                        </div>
                    </td>
                    <!-- 实际抵扣 -->
                    <td nzAlign="center">
                        <ng-container *ngIf="data.useTime;else templateAmount">
                            {{ data.discountsAmount ? '￥' + data.discountsAmount : '-'}}
                        </ng-container>
                        <ng-template #templateAmount>-</ng-template>
                    </td>
                    <!-- 关联订单号 -->
                    <td nzAlign="center">{{ data.orderNum ? data.orderNum : '-' }}</td>
                    <!-- 领取时间 -->
                    <td nzAlign="center">{{ (data.getTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>
                    <!-- 过期时间 -->
                    <td nzAlign="center" [ngStyle]="{color: flagTime(data.endTime)}">
                        {{ (data.endTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}
                    </td>
                    <!-- 使用时间 -->
                    <td nzAlign="center">{{ (data.useTime | date: 'yyyy-MM-dd HH:mm:ss') || '-' }}</td>
                    <!-- 状态 -->
                    <td nzAlign="center" class="{{ data.status == 1 ? 'font_Green' : data.status == 2 ? 'font_Yellow' : 'font_Black' }}">
                        {{ status_to_text(data.status) }}
                        <i nz-icon nz-tooltip nzType="exclamation-circle" nzTheme="outline" [nzTooltipTitle]="statusTemplate" nzTooltipPlacement="right" *ngIf="data.status == 5"></i>
                        <ng-template #statusTemplate>
                            <p>备注: {{ data.couponInfo.remark }}</p>
                        </ng-template>
                    </td>
                    <!-- 操作 -->
                    <td nzAlign="center" nzRight>
                        <button
                            *ngIf="permission.userPermission.has('marketing:userCoupon:revocation')"
                            nz-button
                            nzType="link"
                            (click)="showVouchers(data.id)"
                            [disabled]="data.status != 1">
                            撤回用户用券
                        </button>
                    </td>
                </tr>
            </tbody>
        </nz-table>

        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>

<!-- 批量停止用户用券 -->
<nz-modal [(nzVisible)]="batch" nzTitle="提示" (nzOnCancel)="handleCancel()">
    <ng-container *nzModalContent>
        <form nz-form>
            <nz-form-item>
                <nz-form-label [nzSpan]="4">
                    撤回原因
                </nz-form-label>
                <nz-form-control [nzSpan]="20">
                    <nz-mention>
                        <textarea rows="6" nz-input [(ngModel)]="stopContent" name="stopContent"></textarea>
                    </nz-mention>
                </nz-form-control>
            </nz-form-item>
    
            <nz-form-control [nzOffset]="16">
                <button nz-button nzCentered nzType="primary" class="m-r-8" (click)="stop(0)">确认撤回</button>
                <button nz-button nzCentered nzType="default" (click)="handleCancel()">取消</button>
            </nz-form-control>
        </form>
    </ng-container>
</nz-modal>

<!-- 停止用户用券 -->
<nz-modal [(nzVisible)]="stopUserVouchers" nzTitle="提示" (nzOnCancel)="handleCancel()">
    <ng-container *nzModalContent>
        <form nz-form>
            <nz-form-item>
                <nz-form-label [nzSpan]="4">
                    撤回原因
                </nz-form-label>
                <nz-form-control [nzSpan]="20">
                    <nz-mention>
                        <textarea rows="6" nz-input [(ngModel)]="stopContent" name="stopContent"></textarea>
                    </nz-mention>
                </nz-form-control>
            </nz-form-item>
    
            <nz-form-control [nzOffset]="16">
                <button nz-button nzCentered nzType="primary" class="m-r-8" (click)="stop(1)">确认撤回</button>
                <button nz-button nzCentered nzType="default" (click)="handleCancel()">取消</button>
            </nz-form-control>
        </form>
    </ng-container>
</nz-modal>
